<template>
    <div class="viewAddPlan">
        <!-- 头部 -->
        <!-- <div class="header">
            <x-icon type="ios-arrow-left" size="" class="icon-white" @click="back"></x-icon>新增{{$route.query.title}}
        </div> -->
        <!-- 内容部分 -->
        <div class="viewAddPlanBox">
            <div class="safeBox2">
                <ul class="ul1">
                    <!-- 项目层级默认本单位--不能选 -->
                    <li v-if="!cs">
                        <span class="spa">被检查单位
                            <div class="imp">
                                <i class="iconfont icon-required"></i>
                            </div>
                        </span>
                        <em>{{param.data.projectName}}</em>
                    </li>
                    <li v-if="cs">
                        <span class="spa">被检查单位
                            <div class="imp">
                                <i class="iconfont icon-required"></i>
                            </div>
                        </span>
                        <!-- <em @click="$router.push({path:'./demo1',query:{type:2}})">{{$store.state.demoArr.Name?$store.state.demoArr.Name:"请选择"}} -->
                        <em @click="companyPropShow = true">{{param.data.projectName?param.data.projectName:"请选择"}}
                            <x-icon type="ios-arrow-right"
                                    size=""></x-icon>
                        </em>
                    </li>
                    <li>
                        <span class="spa">检查类型
                            <div class="imp">
                                <i class="iconfont icon-required"></i>
                            </div>
                        </span>
                        <em>{{param.data.checkType}}</em>
                    </li>
                    <li v-if='typeName'
                        class="form-item form-item-style2">
                        <!-- <span class="spa">检查名称
                            <div class="imp">
                                <i class="iconfont icon-required"></i>
                            </div>
                        </span>
                        <em @click="$router.push('./demo9')"
                            v-if="!param.data.checkName">请输入
                            <x-icon type="ios-arrow-right"
                                    size="20"></x-icon>
                        </em>
                        <em @click="$router.push({path:'./demo9',query:{checkName:param.data.checkName}})"
                            v-else> {{param.data.checkName}}
                            <x-icon type="ios-arrow-right"
                                    size=""></x-icon>
                        </em> -->
                        <div class="label-title">
                            <label>检查名称</label>
                            <i class="iconfont icon-required"></i>
                        </div>
                        <div>
                            <textarea placeholder="请输入检查区域（自行换行）"
                                      v-model="param.data.checkName"></textarea>
                        </div>
                    </li>
                    <li>
                        <span class="spa">检查时间
                            <div class="imp">
                                <i class="iconfont icon-required"></i>
                            </div>
                        </span>
                        <datetime v-model="param.data.CheckDate"
                                  @on-change="change1"></datetime>
                    </li>
                    <li>
                        <span class="spa">检查组长
                            <div class="imp">
                                <i class="iconfont icon-required"></i>
                            </div>
                        </span>
                        <em @click="userPropShow = true"
                            v-if="!param.data.teamLeader">请选择
                            <x-icon type="ios-arrow-right"
                                    size="20"></x-icon>
                        </em>
                        <em @click="userPropShow = true"
                            v-else>{{param.data.teamLeader}}
                            <x-icon type="ios-arrow-right"
                                    size=""></x-icon>
                        </em>
                    </li>
                    <li class="form-item form-item-style2">
                        <!-- <span class="spa">检查区域</span>
                        <em @click="$router.push('./demo4')"
                            v-if="!param.data.checkArea">请输入
                            <x-icon type="ios-arrow-right"
                                    size="20"></x-icon>
                        </em>
                        <em @click="$router.push({path:'./demo4',query:{checkArea:param.data.checkArea}})"
                            v-else> {{param.data.checkArea}}
                            <x-icon type="ios-arrow-right"
                                    size=""></x-icon>
                        </em> -->
                        <div class="label-title">
                            <label>检查区域</label>
                        </div>
                        <div>
                            <textarea placeholder="请输入检查区域（自行换行）"
                                      v-model="param.data.checkArea"></textarea>
                        </div>
                    </li>
                    <li class="form-item form-item-style2">
                        <!-- <span class="spa">检查内容</span>
                        <em @click="$router.push('./demo5')"
                            v-if="!param.data.checkContent">请输入
                            <x-icon type="ios-arrow-right"
                                    size="20"></x-icon>
                        </em>
                        <em @click="$router.push({path:'./demo5',query:{checkContent:param.data.checkContent}})"
                            v-else> {{param.data.checkContent}}
                            <x-icon type="ios-arrow-right"
                                    size=""></x-icon>
                        </em> -->
                        <div class="label-title">
                            <label>检查内容</label>
                        </div>
                        <div>
                            <textarea placeholder="请输入检查内容（自行换行）"
                                      v-model="param.data.checkContent"></textarea>
                        </div>
                    </li>
                    <li class="form-item form-item-style2">
                        <!-- <span class="spa">检查重点</span>
                        <em @click="$router.push('./demo6')"
                            v-if="!param.data.checkPoint">请输入
                            <x-icon type="ios-arrow-right"
                                    size="20"></x-icon>
                        </em>
                        <em @click="$router.push({path:'./demo6',query:{checkPoint:param.data.checkPoint}})"
                            v-else> {{param.data.checkPoint}}
                            <x-icon type="ios-arrow-right"
                                    size=""></x-icon>
                        </em> -->
                        <div class="label-title">
                            <label>检查重点</label>
                        </div>
                        <div>
                            <textarea placeholder="请输入检查重点（自行换行）"
                                      v-model="param.data.checkPoint"></textarea>
                        </div>
                    </li>
                </ul>
                <h2>检查组成员及分工
                    <span @click="add">添加 </span>
                </h2>
                <swipeout class="lists">
                    <swipeout-item transition-mode="follow"
                                   v-for="(item,index) in ulList"
                                   :key="index">
                        <div slot="right-menu">
                            <swipeout-button @click.native="onButtonClick(index)"
                                             type="warn">删除</swipeout-button>
                        </div>
                        <div slot="content">
                            <ul class="ul1">
                                <li>
                                    <span class="spa">成员
                                        <div class="imp">
                                            <i class="iconfont icon-required"></i>
                                        </div>
                                    </span>
                                    <!-- <em @click="memberName(item,index)">{{item.memberName}} -->
                                    <em @click="personPropShow = true;ulListCurrentIndex = index">
                                        {{item.memberName?item.memberName:'请选择'}}
                                        <x-icon type="ios-arrow-right"
                                                size="20"></x-icon>
                                    </em>
                                </li>
                                <li>
                                    <span class="spa">分工
                                        <div class="imp">
                                            <i class="iconfont icon-required"></i>
                                        </div>
                                    </span>
                                    <!-- <em @click="memberWork(item,index)">{{item.memberWork}} -->
                                    <em @click="workPropShow = true;ulListCurrentIndex = index">
                                        {{item.memberWork?item.memberWork:'请选择'}}
                                        <x-icon type="ios-arrow-right"
                                                size="20"></x-icon>
                                    </em>
                                </li>
                            </ul>
                        </div>
                    </swipeout-item>
                </swipeout>
                <div class="btn"
                     @click="sub"
                     v-if="btn">提交</div>
                <div class="btn2"
                     v-if="!btn">提交</div>
            </div>
        </div>
        <div v-transfer-dom>
            <popup v-model="userPropShow"
                   width="100%">
                <userPopup :selectedFn="selectedTeamLeaderFn"></userPopup>
            </popup>
        </div>
        <companyProp :companyPropShow="companyPropShow"
                     :selectCompany="selectCompany"
                     :selectSlef="false"></companyProp>
        <projectPerson :personPropShow="personPropShow"
                       :selectProjectPerson="selectProjectPerson"
                       :currentIndex="ulListCurrentIndex"></projectPerson>
        <workProp :workPropShow="workPropShow"
                  :selectWork="selectWork"
                  :currentIndex="ulListCurrentIndex"></workProp>
        <myMenu @clickBack="back"
                backPath='/safeCheck'></myMenu>
    </div>
</template>
<script>
import { Datetime, TransferDom, Popup } from 'vux'
import userPopup from './demo1/demo3'
import myMenu from '@/commonComponents/menu'
import companyProp from '@/commonComponents/companyProp' // 单位选择
import projectPerson from '@/commonComponents/projectPerson' // 整改责任人
import workProp from '@/commonComponents/workProp' // 分工
export default {
    directives: {
        TransferDom
    },
    components: {
        Datetime,
        myMenu,
        Popup,
        userPopup,
        projectPerson,
        workProp,
        companyProp
    },
    data () {
        return {
            typeName: false,
            show: false,
            satrTime: '请选择',
            endTime: '请选择',
            name1: '',
            name2: '',
            name3: '',
            param: {
                allowPaging: 'true',
                business: 'submitCheckPlan',
                data: {
                    CheckDate: '',
                    Checkmemberlist: [{
                        memberId: '',
                        memberName: '',
                        memberWork: '',
                        memberWorkId: ''
                    }],
                    checkArea: '',
                    checkContent: '',
                    checkName: '',
                    checkPoint: '',
                    checkType: '',
                    isSubmitted: true,
                    projectId: '',
                    projectName: '',
                    teamLeader: '',
                    teamLeaderId: ''
                },
                method: 'new',
                pageIndex: 0,
                pageSize: 20,
                tokenId: 'A3944C2D655B11D684296E71CB81C9BD',
                userId: ''
            },
            ulList: [
                {
                    name1: '1',
                    name2: '2'
                }
            ],
            cs: true,
            btn: true,
            companyPropShow: false, // 选择单位弹层
            userPropShow: false, // 选择人员弹框
            personPropShow: false, // 检查组成员弹框
            workPropShow: false, // 分工弹框
            ulListCurrentIndex: 0 // 当前组织成员索引
        }
    },
    created () {
        if (window.sessionStorage.getItem('star')) {
            this.param.data.CheckDate = window.sessionStorage.getItem('star')
        } else {
            var day2 = new Date()
            day2.setTime(day2.getTime())
            var m = day2.getMonth() + 1 < 10 ? '0' + (day2.getMonth() + 1) : day2.getMonth() + 1
            var d = day2.getDate() < 10 ? '0' + day2.getDate() : day2.getDate()
            this.param.data.CheckDate = day2.getFullYear() + '-' + m + '-' + d
        }
        var token = JSON.parse(window.localStorage.getItem('userInfo'))
        this.param.userId = token.userid
        if (token.departsir == 1) { // 项目层级
            this.cs = false
            this.param.data.projectName = token.deptname
            this.param.data.projectId = token.deptid
        }
    },
    mounted () {
        this.param.data.checkType = window.sessionStorage.getItem('checkType')
        if (this.param.data.checkType == '专项检查' || this.param.data.checkType == '其他检查') {
            this.typeName = true
        }
        if (this.$store.state.ulList) {
            this.ulList = this.$store.state.ulList
        }
        var arr = []
        var name = this.$store.state.name1
        var id1 = this.$store.state.id1
        var name2 = JSON.parse(window.sessionStorage.getItem('name2'))
        var id2 = JSON.parse(window.sessionStorage.getItem('id2'))
        if (!name2) {
            name2 = []
        }
        if (!id2) {
            id2 = []
        }
        name.forEach((item, index) => {
            arr = [...arr, {
                memberName: name[index],
                memberWork: name2[index],
                memberId: id1[index],
                memberWorkId: id2[index]
            }
            ]
        }
        )
        this.param.data.Checkmemberlist = arr
        this.ulList = arr
        if (window.sessionStorage.getItem('teamLeader')) {
            this.param.data.teamLeader = window.sessionStorage.getItem('teamLeader')
        }
        if (window.sessionStorage.getItem('paramsName')) {
            this.name2 = window.sessionStorage.getItem('paramsName')
        }
        if (window.sessionStorage.getItem('name3')) {
            this.name3 = window.sessionStorage.getItem('name3')
        }
        if (window.sessionStorage.getItem('checkName')) {
            this.param.data.checkName = window.sessionStorage.getItem('checkName')
        }
        if (window.sessionStorage.getItem('checkArea')) {
            this.param.data.checkArea = window.sessionStorage.getItem('checkArea')
        }
        if (window.sessionStorage.getItem('checkContent')) {
            this.param.data.checkContent = window.sessionStorage.getItem('checkContent')
        }
        if (window.sessionStorage.getItem('checkPoint')) {
            this.param.data.checkPoint = window.sessionStorage.getItem('checkPoint')
        }
    },
    methods: {
        change1 (value) {
            window.sessionStorage.setItem('star', value)
        },
        memberName (item, index) {
            this.$router.push({ path: './demo7', query: { memberWork: item.name1, index: index, type: 1 } })
        },
        memberWork (item, index) {
            let f = false
            for (var k in this.ulList) {
                console.log(this.ulList[k], 10)
                if (!this.ulList[k].memberName) {
                    this.$vux.toast.text('请选择对应的成员')
                    f = false
                } else if ((this.ulList[k].memberName)) {
                    f = true
                }
            }
            if (f) {
                this.$router.push({ path: './demo8', query: { memberWork: item.name2, index: index } })
            }
        },
        onButtonClick (index) {
            this.ulList.splice(index, 1)
        },
        add () {
            let f = false
            if (this.ulList) {
                for (var i in this.ulList) {
                    if (this.ulList[i].memberName) {
                        f = true
                    } else {
                        f = false
                    }
                }
            }
            console.log(this.ulList.length, 1234)
            if (this.ulList.length == 0) {
                let obj = {}
                obj.memberName = ''
                obj.memberWork = ''
                this.ulList.push(obj)
                this.$store.state.ulList = this.ulList
            } else if (this.ulList.length > 0) {
                console.log(this.ulList, 123)
                for (var k in this.ulList) {
                    if (this.ulList[k].memberName && this.ulList[k].memberWork && f) {
                        let obj = {}
                        obj.memberName = ''
                        obj.memberWork = ''
                        this.ulList.push(obj)
                        this.$store.state.ulList = this.ulList
                    } else {
                        this.$vux.toast.text('请选择对应的成员分工')
                        return false
                    }
                }
            }
        },
        back () {
            this.param.data.Checkmemberlist = []
            this.param.data.checkArea = ''
            this.param.data.checkContent = ''
            this.param.data.checkName = ''
            this.param.data.checkPoint = ''
            this.param.data.checkType = ''
            this.param.data.projectId = ''
            this.param.data.checkName = ''
            this.param.data.projectName = ''
            this.param.data.teamLeader = ''
            this.param.data.teamLeaderId = ''
            window.sessionStorage.removeItem('checkName')
            window.sessionStorage.removeItem('checkArea')
            window.sessionStorage.removeItem('checkPoint')
            window.sessionStorage.removeItem('checkType')
            window.sessionStorage.removeItem('checkContent')
            window.sessionStorage.removeItem('teamLeader')
            window.sessionStorage.removeItem('ids2')
            window.sessionStorage.removeItem('id2')
            window.sessionStorage.removeItem('teamLeaderId')
            window.sessionStorage.removeItem('star')
            window.sessionStorage.removeItem('name2')
            window.sessionStorage.removeItem('paramsName')
            this.$store.state.name1 = []
            this.$store.state.id1 = []
            this.$store.state.demoArr = []
            this.$store.state.ulList = []
        },
        sub () {
            if (this.$store.state.demoArr.Id) {
                this.param.data.projectId = this.$store.state.demoArr.Id
            }
            if (this.$store.state.demoArr.Name) {
                this.param.data.projectName = this.$store.state.demoArr.Name
            }
            console.log(this.$store.state.demoArr.Name, 11, this.param.data.projectName)
            // this.param.data.projectId=this.$store.state.demoArr.Id
            // this.param.data.projectName=this.$store.state.demoArr.Name
            this.param.data.teamLeaderId = window.sessionStorage.getItem('teamLeaderId')
            if (this.typeName) {
                console.log(this.param.data.projectName, 1)
                if (this.param.data.projectName && this.param.data.teamLeader && this.param.data.checkName) {
                    this.$vux.loading.show()
                    this.btn = false
                    this.$axiosAjax.getConfigJson(this.param).then((res) => {
                        this.btn = true
                        if (res.data.code == 0) {
                            this.$vux.loading.hide()
                            this.$router.push('./safeCheck')
                            this.param.data.checkName = ''
                            this.param.data.Checkmemberlist = []
                            this.param.data.checkArea = ''
                            this.param.data.checkContent = ''
                            this.param.data.checkName = ''
                            this.param.data.checkPoint = ''
                            this.param.data.checkType = ''
                            this.param.data.projectId = ''
                            this.param.data.projectName = ''
                            this.param.data.teamLeader = ''
                            this.param.data.teamLeaderId = ''
                            this.$store.state.name1 = []
                            this.$store.state.id1 = []
                            this.$store.state.demoArr = []
                            this.$store.state.ulList = []
                            window.sessionStorage.removeItem('checkName')
                            window.sessionStorage.removeItem('checkArea')
                            window.sessionStorage.removeItem('checkPoint')
                            window.sessionStorage.removeItem('checkType')
                            window.sessionStorage.removeItem('checkContent')
                            window.sessionStorage.removeItem('teamLeader')
                            window.sessionStorage.removeItem('ids2')
                            window.sessionStorage.removeItem('id2')
                            window.sessionStorage.removeItem('teamLeaderId')
                            window.sessionStorage.removeItem('star')
                            window.sessionStorage.removeItem('name2')
                            window.sessionStorage.removeItem('paramsName')
                        } else {
                            this.$vux.toast.text(res.data.info)
                        }
                    })
                } else if (!this.param.data.teamLeader) {
                    this.$vux.toast.text('检查组长必填')
                } else if (!this.param.data.projectName) {
                    this.$vux.toast.text('被检查单位必填')
                } else if (!this.param.data.checkName) {
                    this.$vux.toast.text('检查名称必填')
                }
            }
            if (!this.typeName) {
                console.log(this.$store.state.demoArr.Name, 2)
                if (this.param.data.projectName && this.param.data.teamLeader) {
                    console.log(this.$store.state.demoArr.Name, 22, this.param.data.projectName)
                    this.$vux.loading.show()
                    this.btn = false
                    this.$axiosAjax.getConfigJson(this.param).then((res) => {
                        this.btn = true
                        if (res.data.code == 0) {
                            this.$vux.loading.hide()
                            this.$router.push('./safeCheck')
                            this.param.data.checkName = ''
                            this.param.data.Checkmemberlist = []
                            this.param.data.checkArea = ''
                            this.param.data.checkContent = ''
                            this.param.data.checkName = ''
                            this.param.data.checkPoint = ''
                            this.param.data.checkType = ''
                            this.param.data.projectId = ''
                            this.param.data.projectName = ''
                            this.param.data.teamLeader = ''
                            this.param.data.teamLeaderId = ''
                            this.$store.state.name1 = []
                            this.$store.state.id1 = []
                            this.$store.state.demoArr = []
                            this.$store.state.ulList = []
                            window.sessionStorage.removeItem('checkName')
                            window.sessionStorage.removeItem('checkArea')
                            window.sessionStorage.removeItem('checkPoint')
                            window.sessionStorage.removeItem('checkType')
                            window.sessionStorage.removeItem('checkContent')
                            window.sessionStorage.removeItem('teamLeader')
                            window.sessionStorage.removeItem('ids2')
                            window.sessionStorage.removeItem('id2')
                            window.sessionStorage.removeItem('teamLeaderId')
                            window.sessionStorage.removeItem('star')
                            window.sessionStorage.removeItem('name2')
                            window.sessionStorage.removeItem('paramsName')
                        } else {
                            this.$vux.toast.text(res.data.info)
                        }
                    })
                } else if (!this.param.data.teamLeader) {
                    this.$vux.toast.text('检查组长必填')
                } else if (!this.param.data.projectName) {
                    this.$vux.toast.text('被检查单位必填')
                }
            }
        },
        selectCompany (item) {
            this.companyPropShow = false
            this.param.data.projectName = item.Name
            this.param.data.projectId = item.Id
        },
        selectedTeamLeaderFn (realName, memberId) {
            this.userPropShow = false
            this.param.data.teamLeader = realName
            this.param.data.teamLeaderId = memberId
        },
        selectProjectPerson (item) {
            this.personPropShow = false
            this.ulList[this.ulListCurrentIndex] = {
                memberName: item.Name,
                memberId: item.Id
            }
            this.param.data.Checkmemberlist = this.ulList
        },
        selectWork (memberWorkArr, memberWorkIdArr) {
            this.workPropShow = false
            this.ulList[this.ulListCurrentIndex].memberWork = memberWorkArr
            this.ulList[this.ulListCurrentIndex].memberWorkId = memberWorkIdArr
            this.param.data.Checkmemberlist = this.ulList
        }
    }
}
</script>
<style lang="less" scope>
.viewAddPlan {
    width: 100%;
    height: 667px;
    background-color: #ebeef2;
    .viewAddPlanBox {
        height: 667px;
        width: 100%;
        .safeBox2 {
            width: 100%;
            height: 667px;
            position: relative;
            background-color: #ebeef2;
            .ul1 {
                padding: 0 10px;
                background-color: #fff;
                li {
                    padding: 10px 0;
                    border-bottom: 1px solid #eee;
                    width: 100%;
                    height: 50px;
                    line-height: 30px;
                    position: relative;
                    .vux-x-icon {
                        fill: #999;
                        float: right;
                        position: absolute;
                        height: 20px;
                        width: 20px;
                        // margin-top: -6px;
                        // border-radius: 2px;
                        top: 14px;
                        right: -6px;
                    }
                    .spa {
                        float: left;
                        font-size: 14px !important;
                        line-height: 30px !important;
                        position: relative;
                        color: #333;
                        .imp {
                            color: red;
                            font-size: 20px;
                            top: 0px;
                            position: absolute;
                            right: -18px;
                        }
                    }
                    em {
                        float: right;
                        width: 240px;
                        height: 30px;
                        font-size: 14px;
                        line-height: 30px;
                        text-align: right;
                        margin-right: 10px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        color: #999;
                    }
                    .weui-cell {
                        padding: 0;
                    }
                    .vux-cell-value {
                        float: right;
                        font-size: 14px;
                        // margin-right: 10px;
                        // color: #000;
                        color: #999;
                    }
                    .weui-cell_access .weui-cell__ft:after {
                        top: 46%;
                        width: 8px;
                        height: 8px;
                        border-width: 1px 1px 0 0;
                        border-color: #666;
                        content: 0;
                    }
                }
            }
            h2 {
                margin-top: 10px;
                height: 60px;
                line-height: 60px;
                font-size: 16px;
                letter-spacing: 1px;
                color: #2269ff;
                background-color: #fff;
                // background-color: #f1ecec;
                border-bottom: 1px solid #eee;
                padding: 0 10px;
                span {
                    float: right;
                    color: orange;
                    width: 60px;
                    height: 24px;
                    border: 1px solid orange;
                    line-height: 22px;
                    text-align: center;
                    font-size: 14px;
                    border-radius: 5px;
                    margin-top: 18px;
                }
            }
            .btn {
                margin: 20px auto;
                width: 204px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                background-color: #2269ff;
                color: #fff;
                border-radius: 20px;
            }
            .btn2 {
                margin: 20px auto;
                width: 204px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                background-color: #999;
                color: #fff;
                border-radius: 20px;
            }
        }
    }
    .weui-cell:before {
        border-top: 0;
    }
    .form-item {
        margin-left: 0;
        height: auto !important;
    }
}
.pswp {
    display: none;
}
</style>
